---
title: Text
description: Accessible styled texts with an inheritance system.
---

{/* prettier-ignore-start */}
{/* prettier-ignore-end */}

import Code from '@/components/Code.astro';
import { LinkButton } from '@/components/react/LinkButton';
import { Aside, Tabs, TabItem } from '@astrojs/starlight/components';
import importedTextCode from '@rnr/reusables/components/ui/text?raw';


<LinkButton href="https://rn-primitives.vercel.app/slot">
  Slot primitive
</LinkButton>
<LinkButton href="https://rn-primitives.vercel.app/types">
  Types primitive
</LinkButton>
<LinkButton target="_blank" href="https://rnr-showcase.vercel.app/typography">
  Demo
</LinkButton>

<br />

Styled text component and inheritance system.

## Installation

<Tabs>
  <TabItem label='CLI'> 
    ```bash
    npx @react-native-reusables/cli@latest add text
    ```
  </TabItem>
  <TabItem label='Manual'>
    <Aside type="tip" title="Dependencies">
        Before copy/pasting, add the <a href="https://rn-primitives.vercel.app/slot" className='text-white font-bold'>slot primitive</a> and <a href="https://rn-primitives.vercel.app/types" className='text-white font-bold'>types primitive</a> to your project.
    </Aside>

    **Copy/paste the following code to `~/components/ui/text.tsx`:**

    <Code code={importedTextCode} lang="tsx" title="~/components/ui/text.tsx" />
  </TabItem>
</Tabs>


#### Props

Accepts all the props of the React-Native [`Text`](https://reactnative.dev/docs/text#props) component.

#### Usage

Uses the [inheritance system](#inheritance-system) to apply styles from parent components. Usage is the same as the React-Native `Text` component.

## Inheritance system

By default, children cannot inherit styles from their parent components in React-Native. This can be problematic
for components like a `Button` with variants where its `Text` component should change its styles based on the variant.

To solve this, components that need to pass styles to their `Text` children are wrapped with a `TextClassContext.Provider`.
The `Text` component applies the styles from the `TextClassContext` to the React-Native `Text` component.

#### Specificity

The algorithm used to determine which styles to apply is based on the following order of specificity:

<Aside title="Info">
    Ordered from highest to lowest specificity. ClassNames with higher specificity will override those with lower specificity.
</Aside>

**Order of specificity:**

1. The added `className` of the `Text` component when being used
2. The `value` of the closest `TextClassContext.Provider` to children `Text` components
3. The default `className` in the `Text` component

**Example:**

<Tabs>
  <TabItem label="Screen.tsx">
```tsx
  import { Text } from '~/components/ui/text';
  import { Parent } from './Parent';
  import { OtherParent } from './OtherParent';

  function Screen(){
    return (
        <>
        {/* Default behavior without a parent `TextClassContext.Provider` */}
        <Text>The applied className is foreground</Text>
        <Parent>
            {/* Inherits the `TextClassContext.Provider` value from the `Parent` component and overrides the default `Text` component `className` */}
            <Text>The applied className is text-red-500</Text>
            {/* This `className` will override the `TextClassContext.Provider` value */}
            <Text className="text-blue-500">The applied className is text-blue-500</Text>
            <OtherParent>
                {/* Inherits the `TextClassContext.Provider` value from the `OtherParent` component overrides the `TextClassContext.Provider` value from the `Parent` */}
                <Text>The applied className is text-purple-500</Text>
            </OtherParent>
        </Parent>
        </>
    )
   }
    ```
  </TabItem>
  <TabItem label="Parent.tsx">
  ```tsx
  import { TextClassContext } from '~/components/ui/text';

  export function Parent({ children }) {
    return (
        <TextClassContext.Provider value="text-red-500">
            <View>
                {children}
            </View>
        </TextClassContext.Provider>
    )
   } 
  ```
  </TabItem>
  <TabItem label="OtherParent.tsx">
  ```tsx
  import { TextClassContext } from '~/components/ui/text';

  export function OtherParent({ children }) {
    return (
        <TextClassContext.Provider value="text-purple-500">
            <View>
                {children}
            </View>
        </TextClassContext.Provider>
    )
   }
  ```
  </TabItem>
</Tabs>





